<template>
  <div>
    <van-search
    ref="search"
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
        <ul v-if="value">
        <li v-for="data in computList" :key="data.cinemaId">
            <div class="right">
            <div class="cinemaName">{{ data.name }}</div>
            <div class="cinemaAddress">{{ data.address }}</div>
            </div>
            <div class="price">￥{{ data.lowPrice / 100 }}起</div>
        </li>
        </ul>
  </div>
</template>
<script>
import Obj from '@/until/obj.js'
// import BetterScroll from 'better-scroll'
export default {
  mixins: [Obj],
  data () {
    return {
      value: '',
      height: '0px'
    }
  },
  methods: {
    onSearch () {

    },
    onCancel () { this.$router.back() }
  },
  computed: {
    computList () {
      return this.$store.state.cinemaList.filter(item => item.name.toUpperCase()
        .includes(this.value.toUpperCase()) || item.address.toUpperCase()
        .includes(this.value.toUpperCase()))
    }
  },
  mounted () {
    if (this.$store.state.cinemaList.length === 0) {
      this.$store.dispatch('changCinemas', this.$store.state.cityId)
    } else {
      console.log('huan')
    }
  }
}
</script>
<style lang="scss" scoped>
li {
  display: flex;
  justify-content: space-between;
  padding: 0.9375rem;
}
.cinemaName {
  margin-top: 0.3125rem;
  font-size: 15px;
}
.cinemaAddress {
  font-size: 12px;
  color: #797d82;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.3125rem;
}
.price {
  font-size: 15px;
  color: #ff5f16;
}
.right {
  width: 13.25rem;
  padding-right: 0.9375rem;
  margin-right: 1;
}
.box {
  overflow: hidden;
  position: relative;
  // height: 18.75rem;
}
</style>
